<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/include/header.jsp" %>
</head>
<body>
	<div style="padding: 5px;">
  		<div class="b_box">
        <div class="p_bar"></div>
           <div class="ch_panel" id="queryDiv" style="height: 32px">
				<input type="hidden" data-qname="roleIds" id="roleIds" value="${sysUserQueryVo.roleIds}" size="200"/>
				<input type="hidden" data-qname="status" id="status" value="1"/>
				<table>
					<tr>
						<td class="t_l">
							角色名称:
							<input type="text" data-qname="roleName" id="roleName" value="" class="input_txt"/>
						</td>
						<td class="t_r" >
							<input type="button" value="查询" id="searchBtn" class="c_btn"/>
							<input type="button" value="保存" id="saveBtn" class="a_btn"/>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="action_box m_t10 t_l">
			<span class="action_tit">[角色信息/选择用户：${sysUser.userCnName}（${sysUser.username}）]</span>
		</div>
		<div>
			<div style="width:100%; background-color:white;float:right">
				<table id="tbwrap" class="table_list"></table>
				<div class="page eui-pager-custom" id="j_pager"></div>
			</div>
		</div>
		
	</div>
		
	<script type="text/html" id="tb_template">
	    <thead>
			<tr>
				<th>操作</th>
				<th>角色名称</th>
			</tr>
		</thead>
		<tbody data-type="body" id="queryTable">
    		<!if(list.length>0) { !>
        		<!for(var i=0,len=list.length;i<len;i++){
            		var item = list[i],classItem = (i%2!=0)?"odd td_odd":"even";
          		!>
		    	<tr class="gradeA <!=classItem!>">
					<td style="border-left:2px solid #C8D1D5;">
						<input type="checkbox" value="<!=item["roleId"]!>" class="isChecked" name="roleArray"'/>
					</td>
			    	<td><!=item["roleName"]!></td>
		   		</tr>
        	<!}!>
    		<!}else{!>
				<tr>
		    		<td style="border-left:2px solid #C8D1D5;" colspan="2">暂无数据</td>
				</tr>
    		<!}!>
 		</tbody>
	</script>
	
	
	<script type="text/javascript">
		$(function(){
			//1、保存角色关系。
			$("#saveBtn").click(function(){
				$.post("${ctx}/sysUser/setRole", { roleIds: $("#roleIds").val(), userId:"${sysUser.userId}", csrfToken:"${csrfToken}" },
					function (result) {
			            if ("succ" == result) {
			            	alert("操作成功");
							parent.layerClose(wname);
			            }else {
			            	alert(result);
			            }
		       	 	},
		       	 "json");
			});
			
			//2、复选框，选中坚挺
			$("#tbwrap").delegate(".isChecked", "click", function () {
				var roleId = $(this).val();//$(this).data("value");
			    if(this.checked == true){
			    	 var roleIds =  $("#roleIds").val();
			    	 roleIds += roleId + ",";
			    	 $("#roleIds").val(roleIds);// 把记录的ID数组字符串赋给隐藏传递的chBoxId
			     }else{
			    	 var roleIds =  $("#roleIds").val();
			    	 var strTemp=roleId+",";//临时变量
			    	 roleIds=roleIds.replace(strTemp,"");
			    	 $("#roleIds").val(roleIds);
			     }
			});
			
			search();
		});
		
		
		//3、查询角色关系。
		$("#searchBtn").click(function(){
			search();
		});
	</script> 
	
	<script type="text/javascript">
		//根据checkId渲染复选框
		function initChecked (result) {
			var roleArray = new Object();
			var id = $("#roleIds").val();
			roleArray = $("input[name=roleArray]")
			var data = id.split(",");
			for (var i = 0; i < data.length; i++) {
				for (var j = 0; j < roleArray.length; j++) {
					if (data[i] == roleArray[j].value) {
						roleArray[j].checked = true;
					}
				}
			}
		}

		function search() {
			// 这里放包含查询条件的DIV
			var paramData = easyUtils.getQueryDivDefault("queryDiv");
			seajs.use([ "component/table" ], function (uiTable) {
				var param = {
					url : "${ctx}/sysRole/ajaxPage", data : paramData
				};
				easyUtils.getData(param, function (result) {
					easyUtils.buildTableCallback(result, param, uiTable, "#tbwrap", "#j_pager", initChecked);
					if (result.dataList.length > 0) {
						initChecked();//初始化勾选
					}
				});
			});
		}
	</script>
	
</body>
</html>